<script lang="ts" setup>
import { ref, toRefs } from 'vue'

defineOptions({
  name: 'ChargeOptions',
})
const props = defineProps<{
  list: Array<ListItem>
}>()
const emit = defineEmits<{
  (e: 'change', value: ListItem): void
}>()
const recharge = ref<ListItem | null>(null)
defineExpose({ recharge })
interface ListItem {
  num: number
  price: number
  id: string
}
const { list } = toRefs(props)
function changeData(item: ListItem) {
  recharge.value = recharge.value?.id === item.id ? null : item
  emit('change', { ...recharge.value })
}
</script>

<template>
  <view class="list">
    <wd-row :gutter="10">
      <wd-col v-for="item in list" :key="item.id" :span="8">
        <view class="item" :class="{ active: recharge?.id === item.id }" @click="changeData(item)">
          <!-- <view class="cz-icon">
            <wd-img :width="30" :height="30" src="/static/images/cz.png" />
          </view> -->
          <view v-if="item.num > 6" class="hot">
            <wd-img :width="30" :height="30" mode="heightFix" src="/static/images/hot.png" />
          </view>
          <view class="text-28rpx">
            {{ item.num }}币
          </view>
          <view class="price">
            {{ item.price }}分
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>

<style lang="scss" scoped>
.list{
  .item {
    text-align: center;
    position: relative;
    border: 1px solid #ae7b2a;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #d9b75e;
    font-weight: bold;
    padding-top: 15rpx;
    .cz-icon{
      transform: rotate(-25deg);
    }
    .hot {
      position: absolute;
      right: 0;
      top: 0;
    }
    .price {
        font-size: 28rpx;
        background-color: #eece7b;
        color: #ffffff;
        padding: 2px 6px;
        margin-top: 15rpx;
    }
  }
  .item.active {
    .price {
        background-color: #eeb830;
        color: #ffffff;
        position: relative;
        overflow: hidden;
        &::before {
            content: "";
            position: absolute;
            bottom: -3px;
            left: 15px;
            width: 12rpx;
            height: 50rpx;
            background-color: rgba(255, 255, 255, 0.2);
            animation: identifier-51b03b2c 1s infinite;
            transform: rotate(16deg);
        }
    }
    @keyframes identifier {
      0% {
        left: 0;
      }
    100% {
        left: 300rpx;
    }

    }
  }
}
</style>
